<template>
  <div>
    <h1 style="color: tomato">登陆成功 欢迎 {{ user.name }}</h1>

    <el-table
      :data=" userList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">

      <el-table-column
        prop="id"
        label="ID"
        width="120">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名"
        width="260">
      </el-table-column>

      <el-table-column
        prop="phone"
        label="电话号码"
        width="300">
      </el-table-column>

      <el-table-column
        prop="ctime"
        label="注册日期"
        width="300">
      </el-table-column>

      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入名字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit( scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
export default {
  name: "Home",

  data(){
    return{
      user:this.$store.getters.getUser,

      userList: [],
      search: ''
    }
  },


  methods: {
    handleEdit(row) {
    this.$router.push(`edit/${row.id}`);

    },

    //操作删除的方法
    handleDelete(row) {
      let vm = this;
      //发送删除数据的请求
      this.axios({
        //url写法： 方式1
        // url:"http://localhost:9090/vue/del1?id="+row.id,
        //url写法： 方式2
        // url:"http://localhost:9090/vue/del/"+row.id,
        //url写法： 方式3
        url:`http://localhost:9090/vue/del/${row.id}`,
        method:"GET",
      }).then(function (res){
        //判断是否删除成功
        if (res.data.code == 0){
          vm.$message.success("删除成功")
          //重新查询列表页
            vm.queryUserList();
        }
      }).catch(function (err){
        vm.$message.success("删除失败")
      });
    },
    //封装的查询用户的方法 刷新页面列表
    queryUserList(){
      //发送axios请求
      let vm = this;
      this.axios({
        url:'http://localhost:9090/vue/users',
        method: 'GET'
      }).then(function (res){
        console.log(res.data);
        vm.userList=res.data.data.list;
      });
    }

  },

  mounted() {
    //页面挂载完成后 查询用户
    this.queryUserList();
  }
}
</script>

<style scoped>

</style>
